<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 是否显示 Drawer -->
                    <div :style='样式1'>
                        <h4>是否显示 Drawer : </h4>
                        <spen :style='样式2'>英:v-model,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["v-model"]' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true -->
                    <div :style='样式1'>
                        <h4>Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true : </h4>
                        <spen :style='样式2'>英:append-to-body,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["append-to-body"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否在 Drawer 出现时将 body 滚动锁定 -->
                    <div :style='样式1'>
                        <h4>是否在 Drawer 出现时将 body 滚动锁定 : </h4>
                        <spen :style='样式2'>英:lock-scroll,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["lock-scroll"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                    <!-- 是否可以通过点击 modal 关闭 Drawer -->
                    <div :style='样式1'>
                        <h4>是否可以通过点击 modal 关闭 Drawer : </h4>
                        <spen :style='样式2'>英:close-on-click-modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-on-click-modal"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以通过按下 ESC 关闭 Drawer -->
                    <div :style='样式1'>
                        <h4>是否可以通过按下 ESC 关闭 Drawer : </h4>
                        <spen :style='样式2'>英:close-on-press-escape,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-on-press-escape"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 打开的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>Drawer 打开的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:open-delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["open-delay"]'
                            size='small' @change="提交改变">
                            <el-radio label=3000>有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 关闭的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>Drawer 关闭的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:close-delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-delay"]'
                            size='small' @change="提交改变">
                            <el-radio label=3000>有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 的自定义类名 -->
                    <div :style='样式1'>
                        <h4>Drawer 的自定义类名 : </h4>
                        <spen :style='样式2'>英:custom-class,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["custom-class"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 控制是否在关闭 Drawer 之后将子元素全部销毁 -->
                    <div :style='样式1'>
                        <h4>控制是否在关闭 Drawer 之后将子元素全部销毁 : </h4>
                        <spen :style='样式2'>英:destroy-on-close,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["destroy-on-close"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否需要遮罩层 -->
                    <div :style='样式1'>
                        <h4>是否需要遮罩层 : </h4>
                        <spen :style='样式2'>英:modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.modal' size='small'
                            @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 打开的方向 -->
                    <div :style='样式1'>
                        <h4>Drawer 打开的方向 : </h4>
                        <spen :style='样式2'>英:direction,类型:enum,默认:rtl</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.direction' size='small'
                            @change="提交改变">
                            <el-radio label="rtl">右边 </el-radio>
                            <el-radio label="ltr">左边</el-radio>
                            <el-radio label="ttb">上边 </el-radio>
                            <el-radio label="btt">下边 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示关闭按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示关闭按钮 : </h4>
                        <spen :style='样式2'>英:show-close,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["show-close"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释 -->
                    <div :style='样式1'>
                        <h4>Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释 : </h4>
                        <spen :style='样式2'>英:size,类型:number \,默认:string</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'
                            @change="提交改变">
                            <el-radio label=500>有例子1 </el-radio>
                            <el-radio label="50%">有例子2 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 的标题，也可通过具名 slot （见下表）传入 -->
                    <div :style='样式1'>
                        <h4>Drawer 的标题，也可通过具名 slot （见下表）传入 : </h4>
                        <spen :style='样式2'>英:title,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.title' size='small'
                            @change="提交改变">
                            <el-radio label="我是标题">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 -->
                    <div :style='样式1'>
                        <h4>控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 : </h4>
                        <spen :style='样式2'>英:with-header,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["with-header"]'
                            size='small' @change="提交改变">
                            <el-radio :label=true>是 </el-radio>
                            <el-radio :label=false>否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 遮罩层的自定义类名 -->
                    <div :style='样式1'>
                        <h4>遮罩层的自定义类名 : </h4>
                        <spen :style='样式2'>英:modal-class,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["modal-class"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 设置 z-index -->
                    <div :style='样式1'>
                        <h4>设置 z-index : </h4>
                        <spen :style='样式2'>英:z-index,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["z-index"]' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- header 的 aria-level 属性 -->
                    <div :style='样式1'>
                        <h4>header 的 aria-level 属性 : </h4>
                        <spen :style='样式2'>英:header-aria-level,类型:string,默认:2</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["header-aria-level"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- Drawer 打开的回调 -->
                    <div :style='样式1'>
                        <h4>Drawer 打开的回调 : </h4>
                        <spen :style='样式2'>英:open,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.open' size='small'
                            @change="提交改变">
                            <el-radio label="打开的回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 打开动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Drawer 打开动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:opened,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.opened' size='small'
                            @change="提交改变">
                            <el-radio label="打开动画结束时的回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 关闭的回调 -->
                    <div :style='样式1'>
                        <h4>Drawer 关闭的回调 : </h4>
                        <spen :style='样式2'>英:close,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.close' size='small'
                            @change="提交改变">
                            <el-radio label="关闭的回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 关闭前的回调，会暂停 Drawer 的关闭 -->
                    <div :style='样式1'>
                        <h4>关闭前的回调，会暂停 Drawer 的关闭 : </h4>
                        <spen :style='样式2'>英:before-close,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["before-close"]'
                            size='small' @change="提交改变">
                            <el-radio label="关闭前的回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Drawer 关闭动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Drawer 关闭动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:closed,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.closed' size='small'
                            @change="提交改变">
                            <el-radio label="关闭动画结束时的回调">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-button :round=true size='small' type='primary' @click="打开抽屉" style="margin-top: 20px;">打开抽屉</el-button>
            <el-drawer v-model="是否打开" v-bind="属性" />
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 50px;" />
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router

const 是否打开 = ref(false)
const 打开抽屉 = () => {
    是否打开.value = !是否打开.value
}

const 代码 = ref('')
const 提交改变 = async () => {
    let 结果 = await 提交方法("组件修改", 组件名.value, 属性.value,事件.value)
    代码.value = 结果
}

const 组件名 = ref('抽屉')
const 属性 = ref({
    // append-to-body:'',//Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true
    // lock-scroll:'',//是否在 Drawer 出现时将 body 滚动锁定
    // before-close:'',//关闭前的回调，会暂停 Drawer 的关闭
    // close-on-click-modal:'',//是否可以通过点击 modal 关闭 Drawer
    // close-on-press-escape:'',//是否可以通过按下 ESC 关闭 Drawer
    // open-delay:'',//Drawer 打开的延时时间，单位毫秒
    // close-delay:'',//Drawer 关闭的延时时间，单位毫秒
    // custom-class:'',//Drawer 的自定义类名
    // destroy-on-close:'',//控制是否在关闭 Drawer 之后将子元素全部销毁
    // modal:'',//是否需要遮罩层
    // direction:'',//Drawer 打开的方向
    // show-close:'',//是否显示关闭按钮
    // size:'',//Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
    // title:'',//Drawer 的标题，也可通过具名 slot （见下表）传入
    // with-header:'',//控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效
    // modal-class:'',//遮罩层的自定义类名
    // z-index:'',//设置 z-index
    // header-aria-level:'',//header 的 aria-level 属性


})
const 事件 = ref({
    // open:'',//Drawer 打开的回调
    // opened:'',//Drawer 打开动画结束时的回调
    // close:'',//Drawer 关闭的回调
    // closed:'',//Drawer 关闭动画结束时的回调

})

const 重置组件 = () => {
    属性.value = {}
    事件.value = {}

    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



</script>
<style   scoped></style>
